<template>
  <div class="content">
    <main>
      <article>
        <TopBlog :articles="topArticles" />
        <NewBlog :articles="newArticles" />
      </article>
      <aside>
        <AsideMood />
        <AsidePics />
        <AsideLinks />
        <AsideTags />
        <div class="tuijian"></div>
      </aside>
    </main>
    <Footer />
  </div>
</template>

<script>
import Footer from '@/components/Footer.vue'
import TopBlog from '@/components/TopBlog.vue'
import NewBlog from '@/components/NewBlog.vue'
import AsideMood from '@/components/AsideMood.vue'
import AsidePics from '@/components/AsidePics.vue'
import AsideTags from '@/components/AsideTags.vue'
import AsideLinks from '@/components/AsideLinks.vue'
import { getArticleList } from '@/api/article'
export default {
  components: {
    Footer,
    TopBlog,
    NewBlog,
    AsideMood,
    AsidePics,
    AsideTags,
    AsideLinks
  },
  data() {
    return {
      newArticles: [],
      topArticles: [],
      page: 1,
      lock: false
    }
  },
  created() {
    this.page = 1
    this.getData()
  },
  mounted() {
    window.addEventListener('scroll', this.getScroll)
    window.addEventListener('beforeunload', () => {
      this.page = 1
    })
  },
  methods: {
    getScroll(event) {
      if (this.lock) return
      const scrollBottom =
        event.target.documentElement.scrollHeight -
        event.target.documentElement.scrollTop -
        event.target.documentElement.clientHeight
      if (scrollBottom < 1) {
        this.lock = true
        this.page++
        this.getData()
        this.lock = false
      }
    },
    async getData() {
      const opt = {
        page: this.page,
        per_page: 10
      }
      await getArticleList(opt).then(
        res => {
          this.topArticles = res.data.topData
          console.log(this.topArticles)
          const arr = res.data.newData.filter(item => {
            return (
              item.id !== this.topArticles[0].id &&
              item.id !== this.topArticles[1].id &&
              item.id !== this.topArticles[2].id
            )
          })
          console.log(arr)
          this.newArticles = [...this.newArticles, ...arr]
          console.log(this.newArticles)
        },
        res => {
          console.log(res)
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
// 宽度大于1201px时
@media screen and (min-width: 1201px) {
  .content {
    width: 1200px;
    margin: 0 auto;
  }
}

// 宽度小于1200px时
@media screen and (max-width: 1200px) {
  .content {
    margin: 0 40px;
  }
}

@media only screen and (max-width: 768px) {
  body .content main article {
    width: 100%;
  }
  aside {
    display: none;
  }
}

@media only screen and (max-width: 480px) {
  .content {
    margin: 0 15px;
  }
  body .content article .blogs ul li {
    padding: 10px;
  }
  body .content article .blogs ul li a i {
    width: 90px;
    height: 60px;
    margin-right: 10px;
  }
}

.content {
  main {
    display: flex;
    article {
      width: 860px;
    }
    aside {
      width: 320px;
      margin-left: 20px;
      text-align: left;
    }
  }
}
</style>
